<template>
    <el-dialog
      v-model="roler.roledialogvisible"
      :title="props.title"
      width="30%"
      :rules="rules"
      @opened = "handleOpen"
      @closed="handleClose"
    >
    <el-form :model="form" ref="dialogFormRef" :rules="rules">
      <el-form-item label="用户名" prop="username" >
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password" >
        <el-input v-model="form.password" autocomplete="off" type="password"/>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname" >
        <el-input v-model="form.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone" v-if="props.roleAction=='add'" >
        <el-input v-model="form.phone" autocomplete="off"  v-if="props.roleAction=='add'" />
      </el-form-item>
      <el-form-item label="性别" prop="sex" v-show="props.roleAction=='add'">
        <el-input v-model="form.sex" autocomplete="off" v-show="props.roleAction=='add'" />
      </el-form-item>
      <el-form-item label="城市" prop="city" v-if="props.roleAction=='add'" >
        <el-input v-model="form.city" autocomplete="off" v-if="props.roleAction=='add'"/>
      </el-form-item>
    </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roler.roledialogvisible=false">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref ,reactive,onMounted} from 'vue'
  import {ElMessage} from 'element-plus'
  import userole from '../../store/role.js'
  import *as role from '../../api/role.js'

  let roler = userole()
  let props =defineProps({
     roleAction:{
       type:String,
       default:'add'
     },
     title:{
       type:String,
       default:'添加角色'
     },
     reviewRole:{
       type:Object,
       default:()=>{}
     },
     getUsersList:{
        type:Function
     }
  })
 
   
   let form = ref({
     username:'',
     password:'',
     nickname:'',
     phone:'',
     sex:'',
     city:'',
   })
  let rules = reactive({
    username: { required: true, message: '用户名不能为空', trigger: 'blur' },
    password: { required: true, message: '密码不能为空', trigger: 'blur' },
    city: { required: true, message: '城市不能为空', trigger: 'blur' },
})

let handleOpen = ()=>{
    if(props.roleAction == 'edit'){
        form.value = props.reviewRole
    }
}
let dialogFormRef = ref(null)

let handleOk = ()=>{
    
    dialogFormRef.value.validate(async (vaild)=>{
    if(vaild){
      let newRoleForm ={}
      if(props.roleAction=="add"){
      try {
        let res = await role.addUserApi(form.value) 
        if(res.data.status == 1){
          props.getUsersList()
          ElMessage.success('添加成功')
        }
        
      } catch (error) {
        ElMessage.error('添加失败')
        console.log(error);
        }
      
       
      }else if(props.roleAction=="edit"){
        try {
          let newForm = {
            username:form.value.username,
            password:form.value.password,
            nickname:form.value.nickname,
            sex:form.value.sex,
            city:form.value.city,
            unid:props.reviewRole.unid
          }
            let res = await role.updateRoleApi(newForm)
            console.log(res);
            if(res.data.status == 200){
              ElMessage.success('修改成功')
              props.getUsersList()
            }
          } catch (error) {
            ElMessage.error('修改失败')
            console.log(error);
          }

      }
      roler.roledialogvisible=false
    }else {
         ElMessage.error('请检查表单')
    }
   })
}

let handleClose=()=>{
    dialogFormRef.value.resetFields()
}

  </script>
  <style scoped>

  </style>
  